import { StatusBar } from 'expo-status-bar';
import {ImageBackground ,StyleSheet, Text, ToastAndroid, TouchableOpacity, View, TextInput } from 'react-native';
import React, { useState,useEffect } from "react";
import { AntDesign } from '@expo/vector-icons';
import { useAuth } from '../context/AuthProvider';

export default function AgainLogin({ navigation }) {
    const Center = () => {
        navigation.navigate('Setting')
    }
    useEffect(() => {
        navigation.setOptions({
            headerLeft: () => (
                <View style={{ width: 100 }}>
                    <Text onPress={() => Center()}>
                        <AntDesign
                            name='arrowleft'
                            size={25}
                            color="black"
                        />
                    </Text>
                </View>
            ),
        })
    }, [])
    const [username, setUsername] = useState("");
    const [password, setPassword] = useState("");
    const { setUser } = useAuth();
    const onRegister = () => {
        navigation.navigate('Register')
    }

    const onBtn = () => {
        fetch('http://10.7.89.174:3000/forwordlogin', {
            method: 'post',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                userName: username,
                password: password,
            })
        })
            .then(res => res.json())
            .then(async (res) => {
                console.log(res);
                // console.log(res.code);
                // console.log(res.data);
                // console.log(username)
                // console.log(password)
                if (res.code == 200) {
                        ToastAndroid.show("登录成功", ToastAndroid.SHORT);
                        // set上全部的信息,把所有的都设置上
                        // let data={userName:res.List[0].userName,birthday:List[0].birthday,sex:res.List[0].sex,avatarUrl:res.List[0].avatarUrl}
                        setUser(res.message[0])
                        navigation.navigate('tab')
                } else {
                    ToastAndroid.show("登录失败", ToastAndroid.SHORT);
                }
            })
    };
    return (
        <View style={styles.container}>
            <ImageBackground source={require('../icon/orange.jpg')} style={styles.bgimg}>
            <TextInput
                placeholder="手机号/用户名"
                onChangeText={text => setUsername(text)} //读取用户的输入,从TextInput里取值的唯一做法！）
                value={username}
                style={[styles.inputStyle]}
            />
            <TextInput
                secureTextEntry={true}  //文本框会遮住之前输入的文字
                placeholder="密码"
                onChangeText={text => setPassword(text)}
                value={password}
                style={[styles.inputStyle]}
            />
            <View>
                <Text style={styles.resigtertext} onPress={onRegister}>未注册？请先注册</Text>
                <Text style={styles.forgettext}>忘记密码？</Text>
            </View>

            <TouchableOpacity style={styles.btnStyle}>
                <Text style={styles.loginText} onPress={() => onBtn()}>登录</Text>
            </TouchableOpacity>

            <StatusBar style="auto" />
            </ImageBackground>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        display: 'flex',
        justifyContent: 'space-between',
        // marginTop: 20,
        // paddingTop: 40,
        flex:1,
    },
    bgimg: {
        flex: 1,
        resizeMode: "cover",
        justifyContent: "center"
    },
    inputStyle: {
        width: '80%',
        height: 35,
        marginLeft: 'auto',
        marginRight: 'auto',
        marginTop: 10,
        borderRadius: 8,
        borderColor: '#cacaca',
        borderWidth: 1,
        borderRadius: 8,
        paddingLeft: 15,
    },
    resigtertext: {
        marginRight: 'auto',
        marginLeft: 50,
        marginTop: 10,
        color: 'blue',
    },
    forgettext: {
        marginLeft: 'auto',
        marginRight: 40,
        marginTop: 10,
        color: 'blue',
    },
    btnStyle: {
        marginLeft: 'auto',
        marginRight: 'auto',
        height: 40,
        width: '80%',
        borderRadius: 5,
        marginTop: 20,
        backgroundColor: '#4398ff',
        justifyContent: 'center', //沿主轴方向居中
    },
    loginText: {
        textAlign: 'center',//指定文本的对齐方式
        color: 'white',
        textAlignVertical: 'center',//设置文本垂直方向居中
    },

})